<template>
  <div class="container-page container-page-list-account">
    <splitPane split="vertical">
      <template slot="paneL">
        <el-card shadow="never" header="用户列表">
          <listUser :list="listUser" @detail="chekcDeatil" />
        </el-card>
      </template>
      <template slot="paneR">
        <el-card shadow="never" header="小黑屋列表">
          <listUserFrozen :list="listUser" @detail="chekcDeatil" />
        </el-card>
      </template>
    </splitPane>

    <el-dialog
      title="用户详情"
      :visible.sync="centerDialogVisible"
    >
      <detailUser :value="dialogValue" />
    </el-dialog>
  </div>
</template>

<script>
// item
import splitPane from 'vue-splitpane';
import listUser from './components/list-user.vue';
import listUserFrozen from './components/list-user-frozen.vue';
import detailUser from './components/detail_user.vue';
// api
import { getUserList, userInfoById } from '@/api/mivawork/user.js';
export default {
  components: {
    splitPane,
    listUser,
    listUserFrozen,
    detailUser
  },
  data() {
    return {
      centerDialogVisible: false,
      dialogValue: null,
      listUser: [],
      listUserFrozen: []
    };
  },
  async mounted() {
    await this.getUserList();
  },
  methods: {
    async getUserList() {
      const res = await getUserList({});
      this.listUser = res.data.rows;
    },
    async chekcDeatil(id) {
      const res = await userInfoById({ id });
      console.log(res);
      this.centerDialogVisible = true;
      this.dialogValue = res.data;
      // const h = this.$createElement;
      // this.$msgbox({
      //   title: `用户详情`,
      //   message: h(detailUser, {
      //     props: {
      //       value: res.data
      //     }
      //   })
      // });
    }
  }
};
</script>
